<template>
  <div class="card-list">
    <a-list
        :grid="{gutter: 24, lg: 4, md: 3, sm: 2, xs: 1}"
        :dataSource="dataSource"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <template v-if="item.add">
          <a-button @click="showAddModel" class="new-btn" type="dashed">
            <a-icon type="plus"/>
            添加资产
          </a-button>
        </template>
        <template v-else>
          <a-card :hoverable="true">
            <a-card-meta>
              <div style="margin-bottom: 3px" slot="title">资产序号:{{ item.assetsId }}
                <a-popconfirm title="Sure Delete?" @confirm="deleteAssets(item.assetsId)" ok-text="Yes"
                              cancel-text="No">
                  <a-icon style="float:right;margin-top:3px;" class="copy" type="delete"/>
                </a-popconfirm>
              </div>
            </a-card-meta>
            <a-divider/>
            <p style="width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              资产名字:{{ item.assetsName }}
            </p>
            <p style="width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              <a-icon class="copy" type="copy" @click="copyKey(item.assetsIp)"/>
              资产IP:{{ item.assetsIp }}
            </p>
            <a slot="actions" @click="showAssetsInfo(item)">{{ $t('look') }}</a>
            <a slot="actions" @click="addSession(item.assetsId)">创建会话</a>
          </a-card>
        </template>
      </a-list-item>
    </a-list>
    <a-modal v-model="infoVisible" title="资产详情" @ok="handleOk">
      <p>资产序号:{{ currentItem.assetsId }}
        <a-icon class="copy" type="copy" @click="copyKey(currentItem.id)"/>
      </p>
      <p>资产名字:{{ currentItem.assetsName }}
        <a-icon class="copy" type="copy" @click="copyKey(currentItem.name)"/>
      </p>
      <p>资产IP:{{ currentItem.assetsIp }}
        <a-icon class="copy" type="copy" @click="copyKey(currentItem.aws_account_id)"/>
      </p>
      <p>资产端口:{{ currentItem.assetsPort }}
        <a-icon class="copy" type="copy" @click="copyKey(currentItem.sk)"/>
      </p>
      <p>资产协议:{{ currentItem.assetsProtocol }}
        <a-icon class="copy" type="copy" @click="copyKey(currentItem.email)"/>
      </p>

    </a-modal>
    <a-modal :width="700" v-model="addVisible" :footer="null" title="添加资产">
      <a-form-model :model="newAsset" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
        <a-form-model-item  required porp="assetsName" label="资产名称">
          <a-input v-model="newAsset.assetsName" placeholder="请输入名字"/>
        </a-form-model-item>
        <a-form-model-item required porp="assetsIp" label="资产IP">
          <a-input v-model="newAsset.assetsIp" required placeholder="请输入IP"/>
        </a-form-model-item>
        <a-form-model-item  required porp="assetsPort" label="资产端口">
          <a-input type="Number" v-model="newAsset.assetsPort" placeholder="请输入端口"/>
        </a-form-model-item>
        <a-form-model-item  required porp="assetsProtocol" label="远程协议">
          <a-select v-model="newAsset.assetsProtocol"
                    placeholder="请选择一个远程协议"
          >
            <a-select-option value="RDP">
              RDP
            </a-select-option>
            <a-select-option value="VNC">
              VNC
            </a-select-option>
            <a-select-option value="SSH">
              SSH
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item  required porp="assetsUsername" label="资产用户名">
          <a-input v-model="newAsset.assetsUsername" placeholder="请输入资产用户名"/>
        </a-form-model-item>
        <a-form-model-item  porp="assetsPassword" label="资产密码">
          <a-input v-model="newAsset.assetsPassword" :disabled="checkCert" placeholder="请输入资产密码"/>
        </a-form-model-item>
        <a-form-model-item label="是否使用证书">
          <a-checkbox :checked="checkCert" @change="handleCheckCert">
            勾｜不勾
          </a-checkbox>
        </a-form-model-item>
        <a-form-model-item porp="privateKey" label="资产证书">
          <a-input v-model="newAsset.privateKey" type="textarea" :disabled="!checkCert" placeholder="请粘贴证书"/>
        </a-form-model-item>
        <a-form-model-item  porp="passphrase" label="证书密码">
          <a-input v-model="newAsset.passphrase" :disabled="!checkCert" placeholder="请输入证书密码(可选的)"/>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmitAssets">
            Create
          </a-button>
        </a-form-model-item>
      </a-form-model>

    </a-modal>
    <div>
      <a-pagination
          :default-current="3"
          :total=total
          :pageSize=pageSize
          @change="nextPage"
      />
    </div>
  </div>
</template>

<script>
import {listAssets,deleteAsset, createAsset} from '@/services/assets'
import {createSession} from '@/services/session'


export default {
  name: 'Manage',
  i18n: require('./i18n'),
  data() {
    return {
      pageSize: 15,
      extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
      dataSource: [],
      total: 0,
      infoVisible: false,
      addVisible: false,
      currentItem: {},
      newAsset: {
        assetsName: '',
        assetsIp: '',
        assetsProtocol: '',
        assetsPort: undefined,
        assetsUsername: '',
        assetsPassword: '',
        privateKey: '',
        passphrase: ''

      },
      checkCert: false
    }
  },
  computed: {
    desc() {
      return "资产管理"
    }
  },
  mounted() {
    this.loadingData();
  },
  methods: {
    copyKey(value) {
      this.$copyText(value).then(
          res => {
            console.log(res)
            this.$message.success(this.$t('copySuccess'));
          },
          err => {
            console.log(err)
            this.$message.error(this.$t('CopyError'));
          }
      )
    },
    loadingData() {
      let that = this
      listAssets(1, this.pageSize).then((res) => {
        let data = res.data
        that.total = data.total
        that.dataSource = data['assets']
        that.dataSource.push({
          add: true
        })
      })
    },
    nextPage(page) {
      let that = this
      listAssets(page, this.pageSize).then((res) => {
        let data = res.data
        that.total = data.total
        that.dataSource = data['assets']
        that.dataSource.push({
          add: true
        })
      })
    },
    handleOk() {
      this.infoVisible = false
    },
    showAssetsInfo(item) {
      this.currentItem = item
      this.infoVisible = true
    },
    showAddModel() {
      this.addVisible = true;
    },
    addSession(assetId) {
      let that = this
      createSession(assetId).then((res) => {
        console.log(res)
        that.$message.success("创建成功")
      })
    },
    onSubmitAssets() {
      let that = this
      console.log(this.newAsset)
      createAsset(this.newAsset.assetsName,
          this.newAsset.assetsIp,
          this.newAsset.assetsProtocol,
          this.newAsset.assetsPort,
          this.newAsset.assetsUsername,
          this.newAsset.assetsPassword,
          this.newAsset.privateKey,
          this.newAsset.passphrase).then((res) => {
        //console.log(res)
        if(res.data.result==="success"){
          that.$message.success("添加成功")
        }else{
          that.$message.error("添加失败")
        }
        that.loadingData()
      })

      this.addVisible = false
      this.newAsset = {}

    },
    resetForm() {
      this.$refs.newAsset.resetFields();
    },
    handleCheckCert(e) {
      this.checkCert = e.target.checked
      if (this.checkCert) {
        this.newAsset.assetsPassword = ""
      }
    },
    deleteAssets(assetsId){
      let that = this
      deleteAsset(assetsId).then((res)=>{
        if(res.data.result==='success'){
          that.$message.success("删除成功:" + assetsId)
        }else{
          that.$message.error("删除失败:" + assetsId)
        }
        that.loadingData()
      })
    }

  }

}
</script>

<style lang="less" scoped>
.card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
}

.new-btn {
  border-radius: 2px;
  width: 100%;
  height: 184px;
}

.meta-content {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  height: 50px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.copy:hover {
  color: #108cd3;
}
</style>